<script setup lang="ts">
import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import TagManageTable from './components/tag-manage-table.vue';

const emit = defineEmits<{ reload: [] }>();

const currTagGroupId = ref<number | string>();
const currTagType = ref<number | string>();

const [BasicDrawer, drawerApi] = useVbenDrawer({
  // 在这里更改宽度
  class: 'w-[950px]',
  onClosed: handleClosed,
  // onConfirm: handleConfirm,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    // drawerApi.drawerLoading(true);
    drawerApi.lock(true);
    //
    const { tagGroupId, type } = drawerApi.getData() as {
      tagGroupId?: number | string;
      type?: number | string;
    };
    if (tagGroupId) {
      // 根据标签组ID查询标签列表
      currTagGroupId.value = tagGroupId;
    }
    currTagType.value = type;
    drawerApi.lock(false);
  },
});

async function handleClosed() {
  // await formApi.resetForm();
  // resetInitialized();
}

async function handleTagUpdated() {
  emit('reload');
}
</script>

<template>
  <BasicDrawer :footer="false" title="管理标签">
    <TagManageTable
      :tag-group-id="currTagGroupId"
      :type="currTagType"
      @reload="handleTagUpdated"
    />
  </BasicDrawer>
</template>
